<template>
    <div>
        <a-button @click="openAddressForm">
            新增收货地址
        </a-button>
        <a-card v-for="address in addressData" :title="address.label" style="margin-top: 13px">
            <a-tag slot="extra" color="#f50" v-if="address.isDefault===true">默认地址</a-tag>
            <template slot="actions" class="ant-card-actions">
                <a-icon key="edit" type="edit" @click="openAddressForm(address)"/>
                <a-icon key="delete" style="color: red" type="delete" @click="deleteAddress(address)"/>
                <a-button key="set-default" type="link" style="color: #0C5FA8" @click="changeToDefault(address)"
                          v-if="address.isDefault===false">设为默认
                </a-button>
            </template>
            <a-row class="address-row">
                <a-col :span="3">
                    收货人:
                </a-col>
                <a-col :span="21">
                    {{address.name}}
                </a-col>
            </a-row>
            <a-row class="address-row">
                <a-col :span="3">
                    所在地区:
                </a-col>
                <a-col :span="21">
                    {{address.province}} {{address.city}} {{address.area}}
                </a-col>
            </a-row>
            <a-row class="address-row">
                <a-col :span="3">
                    地址:
                </a-col>
                <a-col :span="21">
                    {{address.address}}
                </a-col>
            </a-row>
            <a-row class="address-row">
                <a-col :span="3">
                    手机:
                </a-col>
                <a-col :span="21">
                    {{address.mobile}}
                </a-col>
            </a-row>
            <a-row class="address-row">
                <a-col :span="3">
                    邮政编码:
                </a-col>
                <a-col :span="21">
                    {{address.zipCode}}
                </a-col>

            </a-row>

        </a-card>

        <address-form :address-model-visible="addressModelVisible" :address-form="addressForm"
                      @modifyAreas="modifyAreas" @closeForm="closeForm" @setLabel="setLabel"></address-form>
    </div>
</template>

<script>
    import AddressForm from "../../../components/infp/address/AddressForm";
    import addressApi from "../../../api/info/addressApi";

    export default {
        inject: ["reload"],
        name: "addressMS",
        components: {AddressForm},
        data() {
            return {
                addressModelVisible: false,
                addressData: [],
                addressForm: {
                    id: undefined,
                    name: "",
                    address: "",
                    provinceId: undefined,
                    cityId: undefined,
                    areaId: undefined,
                    mobile: "",
                    zipCode: "",
                    label: "",
                    tempArea: [],
                    isDefault: false,
                },
            }
        },
        created() {
            this.loadAddressList();
        },
        methods: {
            changeToDefault(address) {
                addressApi.updateDefault(address.id).then(resp => {
                    if (resp.data.flag) {
                        this.reload()
                    }
                })
            },
            /**
             * 删除地址
             */
            deleteAddress(address) {
                let that = this;
                this.$confirm({
                    title: '确认删除该地址吗',
                    okText: '确认',
                    onOk() {
                        addressApi.deleteAddress(address.id).then(resp => {
                            if (resp.data.flag) {
                                that.reload()
                            }
                        })
                    },
                    cancelText: '取消',
                });
            },
            setLabel(label){
                this.addressForm.label=label
            },
            /**
             * 表单修改省市区的回调
             * @param areaIds
             */
            modifyAreas(areaIds) {
                this.addressForm.provinceId = areaIds.province
                this.addressForm.cityId = areaIds.city
                this.addressForm.areaId = areaIds.area
            },
            openAddressForm(record) {

                if (record) {
                    let address = {}
                    Object.assign(address, record);
                    address.tempArea = [address.provinceId, address.cityId, address.areaId]
                    delete address.province
                    delete address.city
                    delete address.area
                    this.addressForm = address;
                } else {
                    this.reset()
                }

                this.addressModelVisible = false
                this.addressModelVisible = true
            },
            reset() {
                this.addressForm = {
                    id: undefined,
                    name: "",
                    address: "",
                    provinceId: undefined,
                    cityId: undefined,
                    areaId: undefined,
                    mobile: "",
                    zipCode: "",
                    label: "",
                    tempArea: [],
                    isDefault: false,
                }
            },
            loadAddressList() {
                addressApi.userAddressData().then(resp => {
                    if (resp.data.flag) {
                        this.addressData = resp.data.data;
                    }
                })
            },
            closeForm() {
                this.addressModelVisible = false
            }
        }
    }
</script>

<style scoped>

    .address-row {
        margin-bottom: 12px;
    }
</style>